<!-- 查询角色 start-->
 查询角色：
 <div class="example-input">
  <input placeholder="搜索角色" nz-input [(ngModel)]="inputValue" (input)="onInput($event)" [nzAutocomplete]="auto" />
  <nz-autocomplete nzBackfill #auto></nz-autocomplete>
</div>
 <!-- 查询角色 end-->

 <!-- 新增角色 start -->
 <button nz-button [nzType]="'primary'" (click)="showModal(1)"style="position: relative; left: 900px"><span>新增角色</span></button>
    <nz-modal [(nzVisible)]="isVisible1" nzTitle="{{chooseOne}}" (nzOnCancel)="handleCancel(1)" (nzOnOk)="handleOk(1)">
      <ng-container >
        <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
          <nz-form-item>
            <nz-form-label [nzSpan]="7" nzRequired>角色名</nz-form-label>
            <nz-form-control [nzSpan]="12" nzHasFeedback nzValidatingTip="Validating..."
              [nzErrorTip]="userErrorTpl">
              <input nz-input formControlName="roleName" placeholder="角色名"/>
              <ng-template #userErrorTpl let-control>
                <ng-container *ngIf="control.hasError('required')">
                  Please input your username!
                </ng-container>
                <ng-container *ngIf="control.hasError('duplicated')">
                  The username is redundant!
                </ng-container>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <br/>
            &nbsp; &nbsp; 状&nbsp;&nbsp;态：
            <nz-radio-group formControlName="radioValue">
              <label nz-radio nzValue="true">启用</label>
              <label nz-radio nzValue="false">禁止</label>
            </nz-radio-group>
          </nz-form-item>
        </form>
      </ng-container>
    </nz-modal>
 <!-- 新增用户 end-->
 <nz-table #basicTable [nzData]="listOfData">
  <thead>
    <tr>
      <th>序号</th>
      <th>角色名</th>
      <th>权限</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
   <tr *ngFor="let data of basicTable.data">
      <td>{{ data.id }}</td>
      <td>{{ data.roleName }}</td>
      <td>{{ data.Authority }}</td>
      <td>
        <a (click)="showModal(2, data)">修改角色名</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="showModal(3)">授权</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a nz-popconfirm nzPopconfirmTitle="确认删除?" (nzOnConfirm)="deleteRow(data.id)">删除</a>
      </td>
    </tr>
  </tbody>
</nz-table>


<nz-modal [(nzVisible)]="isVisible2" nzTitle="授权" (nzOnCancel)="handleCancel(2)" (nzOnOk)="handleOk(2)">
  <ng-container >
    <p>Content one</p>
    <p>Content two</p>
    <p>Content three</p>
  </ng-container>
</nz-modal>